<template>
  <div id="course-content">
    <h2>全部课程</h2>
    <el-divider class="ui-menu-divider"></el-divider>
    <div class="course-padding">
      <span style="color: darkgray">课程类别</span>
      <div class="course-catalog">
        <nuxt-link to="">全部</nuxt-link>
        <nuxt-link to="">移动开发</nuxt-link>
        <nuxt-link to="">数据库</nuxt-link>
        <nuxt-link to="">操作系统</nuxt-link>
        <nuxt-link to=""><span class="course-catalog-active">后端开发</span></nuxt-link>
        <nuxt-link to="">前端开发</nuxt-link>
        <nuxt-link to="">外语考试</nuxt-link>
        <nuxt-link to="">教师资格证</nuxt-link>
      </div>
    </div>
    <div class="course-sort">
      <div class="btn-active">关注度</div>
      <div>最新</div>
      <div>价格</div>
    </div>
    <div class="course-div">
      <div v-for="item in items" class="course-item">
        <nuxt-link :to="item.url">
          <div class="course-image">
            <el-image :src="item.cover" style="overflow: hidden;border-radius: 2px 2px 0 0">
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </div>
          <div>{{item.title}}</div>
          <div>{{item.views}}人学习 | {{item.comment}}评论</div>
        </nuxt-link>
      </div>
    </div>
<!--    TODO  分页控件-->
    <div style="width: 500px;margin: auto">分页</div>
  </div>
</template>

<script>
  export default {
    name: "index",
    data(){
      return{
        items:[
          {
            cover: 'https://xiyun-online-education.oss-cn-hangzhou.aliyuncs.com/Cover/20-12-21/04A2C9D7ABC74301898ACA1BD33A154B.jpg',
            title: '零基础入门Java',
            views: '1000',
            comment: '124',
            url: '',
          },
          {
            cover: 'https://xiyun-online-education.oss-cn-hangzhou.aliyuncs.com/Cover/20-12-21/04A2C9D7ABC74301898ACA1BD33A154B.jpg',
            title: '零基础入门Java',
            views: '1000',
            comment: '124',
            url: '',
          }
        ]
      }
    }
  }
</script>

<style scoped>
  #course-content{
    background: ghostwhite;
    padding: 25px 70px;
  }
  .course-catalog{
    display: inline-block;
  }
  .course-catalog a{
    padding: 0 10px;
    color: #47494e;
  }
  .course-catalog a:hover{
    color: orange;
  }
  .course-sort{
    margin: 12px 0;
    background: whitesmoke;
  }
  .course-sort div{
    width: 96px;
    padding: 8px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    display: inline-block;
  }
  .course-sort div:hover{
    cursor: pointer;
  }
  .btn-active{
    color: white;
    background: mediumspringgreen;
  }
  .course-catalog-active{
    color: orangered;
  }
  .course-div{
    margin: 50px 0;
  }
  .course-item{
    width: 285px;
    margin: 0 10px 20px 20px;
    display: inline-block;
    border-radius: 2px;
  }
  .course-image{
    width: 285px;
  }
  .course-padding{
    padding: 0 10px;
  }
</style>
